<!DOCTYPE html>
<html>
<title>Our Solution</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 30px 30px;
    text-decoration: none;
    font-size: 17px;
}
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color:royalblue;
    color: white;
}
</style>
<script>
        // Get the Sidebar
        var mySidebar = document.getElementById("mySidebar");
        
        // Get the DIV with overlay effect
        var overlayBg = document.getElementById("myOverlay");
        
        // Toggle between showing and hiding the sidebar, and add overlay effect
        function w3_open() {
            if (mySidebar.style.display === 'block') {
                mySidebar.style.display = 'none';
                overlayBg.style.display = "none";
            } else {
                mySidebar.style.display = 'block';
                overlayBg.style.display = "block";
            }
        }
        
        // Close the sidebar with the close button
        function w3_close() {
            mySidebar.style.display = "none";
            overlayBg.style.display = "none";
        }
        </script>
<body class="w3-light-grey">

<!-- Top container -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
        <div class="topnav">
                <a class="active" href="index.html">Home</a>
                <a href="importance.html">The Issue</a>
                <a href="solution.html">Our Solution</a>
                <a href="aboutus.html">About Us</a>
                <a href="contact.html">Contact Us</a>
                <img src="image/9837241d-60ec-43c6-8d5b-59e67252314e.png" style="position:absolute;right:3%;width:7%;top:20%">
        </div>
        
</div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="position:relative;margin-left:0;top:100px">

  <!-- Header -->
  <header class="w3-container" style="padding-top:22px;">
    <h3><b><i class="fa fa-dashboard"></i>    Use Machine Learning to Predict</b></h3>
  </header>

  <div class="content" style="margin-left:10%;margin-right:10%;padding-bottom:100px">
    <h4 style="font-weight:bold">
        A Machine Leaning Model
    </h4>
    <p style="font-size:18px">
        Nothing is more exited than using the next-generation technology and integrating it into real-life solutions. In order to train the model, we collected data from government websites. The model we used is a LSTM model, with the input being a sequence of 30 hour air quality data and the output being the 31st hour prediction.
    </p>
    <img src="https://cdn-images-1.medium.com/max/525/1*epcf2SBjRHBynBNFf-CpQA.png" style="margin-left:23%">
    <br>
    <p style="text-align:center;font-style:italic">A LSTM network</p>
    <p style="font-size:18px">
        Once we have the most up-to-date 30 hour data, we predict the next 24 hours data by putting the prediction back to the input. The following is a graph of real values versus predited values. (Green: real values; Orange: prediction)
    </p>
    <img src="image/1.png" style="width:60%;margin-left:20%;margin-right:auto">
    <br>
    <br>
    <h4 style="font-weight:bold">
            What's Next
        </h4>
        <p style="font-size:18px">
            <li style="font-size:18px">For now, we are using data collected and organized by governments. In the future, we would like to cooperate with local governments and research institutes in more cities to set up measuring devices and gather data in real time.</li>
            <li style="font-size:18px">Develop mobile Apps for smart phones and smart watches, so that users can easily access to the forecaste.</li>
            <li style="font-size:18px">Develop APIs for Smart Home devices, such as Google Home, Amazon Echo, Nest Learning Thermostates, etc..</li>
        </p>
  </div>

</div>



</body>
</html>

